import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
Vue.use(VueResource);//官方插件使用方式
Vue.use(VueRouter);//引入并使用路由组件
// 1-创建组件
import Home from './components/Home'
import News from './components/News'
import GetValue from './components/GetValue'
import GetData from './components/GetDataFrom'
import ListNews from './components/ListNews'
// 2-配置路由
const routes = [
  // { path: '/home', component: Home },
  // { path: '/news', component: News },
  { path: '/listnews',component:ListNews },
  /*
  *1.配置动态路由
  *    routes：[
  *      动态路径参数 以冒号开头   
  *     { path: '/getvalue/:aid', component: GetValue },       
  * ]
  * 2.连接路由
  *     <router-link :to="'/getvalue/' + key">{{item}}--{{key}}</router-link>
  * 
  * 3.在对应的页面
  *  this.$route.params获取动态路由的值
  *  */
  { path: '/getvalue/:aid', component: GetValue },/*动态路由：aid */
  { path: '/getdata', component: GetData },/*动态路由：get method */
  { path: '*', redirect: '/listnews' }   /*默认跳转路由*/
];

// 3-实列化VueRouter
const router = new VueRouter({
  // mode:'hash',//默认模式
  routes
});
//挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
// 5-路由的出口设置---显示路由的地方-----根组件的模板里面放上这句话   <router-view></router-view>    

		// 6、路由跳转
		// <router-link to="/foo">Go to Foo</router-link>
		//  <router-link to="/bar">Go to Bar</router-link>